<!DOCTYPE html>
<html>
<%-include ("head.html") %>

  <body>
    <div id="app">
      <v-app>
        <%-include ("header.html") %>
          <v-main>
            <div id="particles-bg"
              style="height: 100vh; position: fixed; top: 0; width: 100%; filter: blur(1px); opacity: 0.8;"></div>
            <v-container>
              <v-row class="mt-2">
                <v-col v-for="(item, idx) in list" :key="idx" :cols="cols" class="pa-2">
                  <v-hover v-slot="{ hover }">
                    <v-card :elevation="0" :class="$vuetify.breakpoint.xs?'':'pa-4'" style="cursor: pointer"
                      @click="gotoDetail(item.id)">
                      <div style="position:relative; border-radius: 4px; overflow: hidden;">
                        <div
                          style="position: absolute; bottom: 0;left: 0;width: 100%; z-index: 5;color: #e1e1e1; padding: 0 8px 2px 0; text-align: right; font-size: 20px;background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.5)); font-family: 'DIN-BoldItalic';">
                          {{item.score}}
                        </div>
                        <div style="width: 100%;">
                          <div style="padding-top: 144%;position:relative;z-index: 1">
                            <div style="position: absolute;top:0;left: 0;width: 100%;height: 100%;">
                              <div
                                :style="{opacity: hover?1:0, transform: hover?'translate(-50%, -50%) scale(1)':'translate(-50%, -50%) scale(0)'}"
                                style="position: absolute;top:50%;left: 50%; transition: all 0.2s;">
                                <svg t="1703647245871" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                  xmlns="http://www.w3.org/2000/svg" p-id="4206" width="80" height="80">
                                  <path
                                    d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM383.232 287.616l384 224.896-384 223.104v-448z"
                                    fill="#ffffff" p-id="4207"></path>
                                </svg>
                              </div>
                              <!-- <img style="width: 100%;height: 100%;object-fit: cover;"
                                                    src="https://img.wemp4.com/vod/8/65825a4ad0784.jpg" /> -->
                              <img style="width: 100%;height: 100%;object-fit: cover;" :src="item.pic" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div>
                        <div :style="{color:hover? '#00b96b': 'black'}"
                          style=" margin-top:10px; font-size: 18px; transition: all 0.2s;">
                          {{item.name}}
                        </div>
                        <div style="font-size: 14px; color: #8590a6;">
                          {{item.classify}}
                        </div>
                      </div>

                    </v-card>
                  </v-hover>
                </v-col>

              </v-row>

              <div style="text-align: center; margin:20px 0 20px;color: #8590a6">暂时没有了...</div>
            </v-container>
          </v-main>
      </v-app>
    </div>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: {
          list: [],
          total: 0,
          kind: 'tv',
          isLoading: false,
          isEnd: false,
          offset: 0,
          limit: 30,
          searchVal: '',
        },
        computed: {
          cols() {
            switch (this.$vuetify.breakpoint.name) {
              case 'xs':
                return 6;
              case 'sm':
                return 4;
              case 'md':
                return 3;
              case 'lg':
                return 2;
              case 'xl':
                return 2;
            }
          },
        },
        methods: {
          searchHandle,
          async getTvList() {
            let query = { show: true };
              if (this.searchVal.length > 0) {
                query.name = this.searchVal
              }
            try {
              let ret = await axios.post('/v1/web/tv/list', {
                limit: this.limit,
                offset: this.offset * this.limit,
                query
              });
              let rows = ret.data.data.rows.map(a => ({
                ...a,
                pic: base.public_tv_img + a.pic,
              }));
              this.total = ret.data.data.count;
              this.list = this.searchVal.length > 0 ? rows : this.list.concat(rows);
              ++this.offset;
              if (this.limit * this.offset >= this.total) {
                this.isEnd = true;
              }
            } catch (e) {
              let msg = `获取电视剧列表失败，请稍后重试~`;
              console.log(e);
              Snackbar.show({ text: msg, showAction: false, });
            }
          },
          async getMovieList() {
            try {
              let query = { show: true };
              if (this.searchVal.length > 0) {
                query.name = this.searchVal
              }
              let ret = await axios.post('/v1/web/movie/list', {
                limit: this.limit,
                offset: this.offset * this.limit,
                query
              });
              let rows = ret.data.data.rows.map(a => ({
                ...a,
                pic: base.public_movie_img + a.pic,
              }));
              this.total = ret.data.data.count;
              this.list = this.searchVal.length > 0 ? rows : this.list.concat(rows);
              ++this.offset;
              if (this.limit * this.offset >= this.total) {
                this.isEnd = true;
              }
            } catch (e) {
              let msg = `获取电影列表失败，请稍后重试~`;
              console.log(e);
              Snackbar.show({ text: msg, showAction: false, });
            }
          },
          gotoDetail(id) {
            window.location.href = `/detail?id=${id}&kind=${this.kind}&play=1`;
          }
        },
        async mounted() {
          let params = Qs.parse(window.location.href.split("?")[1])
          this.kind = params?.kind ?? 'tv';
          this.searchVal = params?.search ?? '';
          let that = this;
          if (this.kind == 'tv') {
            await this.getTvList();
          }
          if (this.kind == 'movie') {
            await this.getMovieList();
          }
          window.addEventListener('scroll', async () => {
            const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
            if (scrollTop + clientHeight >= scrollHeight - 150) {
              if (!that.isLoading && !that.isEnd) {
                console.log('请求数据');
                that.isLoading = true;
                if (that.kind == 'tv') {
                  await that.getTvList();
                }
                if (that.kind == 'movie') {
                  await that.getMovieList();
                }
                that.isLoading = false;
              }
            }
          });
          particlesJS('particles-bg', particles)
        },
      });
    </script>
  </body>

</html>